<template>
  <div>
    <!--工具类-->

    <Row style="padding-top: 10px;text-align: left">
      <i-col span="20">
        <div>
          <Input v-model.trim="searchParams.keyWord" placeholder="请输入用户名称或邮箱"
                 class="modal_newuser_form_input" clearable></Input>
          <Select v-model="searchParams.searchMatchType" placeholder="分配状态" class="modal_newuser_form_input" clearable>
            <Option value="0">全部</Option>
            <Option value="1">已分配</Option>
            <Option value="2">未分配</Option>
          </Select>
          <!--<Checkbox v-model="searchParams.isSearchMatched">只显示有匹配条件</Checkbox>-->
          <DatePicker @on-change="chooseDate" type="datetimerange" :value="searchParams.startEndDate" :options="dateRange"
                      placement="bottom-end" placeholder="注册日期" class="modal_newuser_form_input"
                      style="width: 200px"></DatePicker>
          <Button type="primary" style="margin-left: 16px" icon="md-search" @click="search" >查询
          </Button>
          <span>&nbsp;</span>
        </div>
      </i-col>
    </Row>

    <!--表格和分页-->
    <Table stripe border ref="userInfo" :columns="tableTitles"
             :data="userList" class="table_css"
           no-data-text="暂无数据" ></Table>

    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60]"
            show-sizer show-elevator/>
    </div>

    <!-- 注册用户和目标客户映射 -->
    <Modal v-model="allotModal.isShow" :scrollable=true
      :loading="allotModal.isLoading" title="注册用户分配"
      :styles="{width:'70%'}">
      <UserMatchCustomer ref="UserMatchCustomer"></UserMatchCustomer>
    </Modal>


    <TiyPhotoView v-model="status.modalImage.isShow" :tiy-photo="status.modalImage.url"></TiyPhotoView>

  </div>

</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/userCustomer/user_customer_data";
  import {
    init,
    webList
  } from "./js/userCustomer/user_customer_funs";
  import UserMatchCustomer from "./UserMatchCustomer.vue";
  import matchData from "./js/userMatchCustomer/user_match_customer_data";
  import { userMatchList } from "./js/userMatchCustomer/user_match_customer_funs";
  import TiyPhotoView from "../widgets/TiyPhotoView";

  export default {
    components: {TiyPhotoView, ICol, UserMatchCustomer},

    data(){
      return {
        tRole:{
          USER_4_201:"USER-4-201"
        },
        tPage: tiyData.tPage,
        status: tiyData.tStatus,
        //搜索条件
        searchParams: tiyData.tParams.searchParams,
        loginTypeDict: this.$store.getters.dictionaries.loginTypeDict,
        //字典 推广客户状态
        targetCustomerStateDict: this.$store.getters.dictionaries.targetCustomerStateDict,
        tData: tiyData.tData,
        userList: tiyData.tData.userList,
        dateRange: tiyData.tData.dateRange,
        choosedTargetUser: [],
        employeeList : tiyData.tData.employeeList,
        tableTitles:tiyData.tableTitles(this,tiyData),
        allotModal:matchData.tStatus.allotModal
      }
    },
    computed : {

    },

    methods: {

      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      chooseDate(date){
        tiyData.tParams.searchParams.startEndDate = date;
      },
      allotUserShow(index){
        userMatchList(this, matchData, tiyData.tData.userList[index]);
      },
      refreshList(){ //刷新列表，用于分配子组件调用。
        webList(this, tiyData);
      }
    },
    mounted(){
      init(this, tiyData);
      webList(this, tiyData);
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;
  }
  .modal_active_form{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }
</style>
